<template>
  <el-dialog title='交易信息新增' :visible.sync='isShow' width='650px' :lock-scroll="false" :close-on-click-modal="false" @close='reset()' @open="init()">
    <div v-loading="loading">
      <el-card class='type-info-box-card'>
        <el-form ref='queryForm' size='mini' :model="queryForm" label-width="140px" :rules="rules" label-position="center">
          <el-row :gutter="30">
            <el-col :span='100'>
              <el-form-item label='交易码' prop='FLOWID'>
                <el-input v-model='queryForm.FLOWID' placeholder="请输入交易码" filterable style="width:350px"></el-input>
              </el-form-item>
              <el-form-item label='交易名称' prop='FLOWNAME'>
                <el-input v-model='queryForm.FLOWNAME' placeholder="请输入交易名称" filterable style="width:350px"></el-input>
              </el-form-item>
              <el-form-item label='交易状态' prop='FLOWSTATUS'>
                <!-- <el-input v-model='queryForm.FLOWSTATUS' placeholder="请输入备注1"  style="width:350px"></el-input> -->
                <el-select v-model='queryForm.FLOWSTATUS' filterable placeholder="请选择交易状态">
                  <el-option 
                    v-for='item in ST.FLOWSTATUS' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label='交易类型' prop='FLOWTYPE'>
                <!-- <el-input v-model='queryForm.FLOWTYPE' placeholder="请输入备注2"  style="width:350px"></el-input> -->
                <el-select v-model='queryForm.FLOWTYPE' filterable placeholder="请选择交易类型">
                  <el-option 
                    v-for='item in ST.FLOWTYPE' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label='交易业务类型' prop='FLOWSUBTYPE'>
                <!-- <el-input v-model='queryForm.FLOWSUBTYPE'  placeholder="请输入备注3"  style="width:350px"></el-input> -->
                <el-select v-model='queryForm.FLOWSUBTYPE' filterable placeholder="请选择业务类型">
                  <el-option 
                    v-for='item in ST.FLOWSUBTYPE' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" style="margin:10px 0;text-align:center">
        <el-button size="mini" @click="isShow=false">取消</el-button>
        <el-button type='primary' size='mini' @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestCT";

  import addInfo from "@/message/CTManage/flow-tradeinfo-manage/flow-tradeinfo-add";
  export default {    
    props: {
      option: Object
    },
    data() {
      var checkFlowID = (rule, value, callback) => {
          const reg = /^[a-zA-Z0-9_]+$/;
          if (reg.test(value)) {
            callback();
          } else {
            callback(new Error("交易码只可包含数字，字母或下划线"))
          }
      };
      var checkFlowName = (rule, value, callback) => {
          const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
          if (reg.test(value)) {
            callback()
          } else {
            callback(new Error("交易名称只可包含汉字，字母，数字和下划线"))
          }
      };
      return {
        loading: false,
        queryForm: { //表单数据
          FLOWID: '',
          FLOWNAME: '',
          FLOWSTATUS: '',
          FLOWTYPE: '',
          FLOWSUBTYPE: ''
        },
        rules: { //表单校验规则
          FLOWID: [
            {required: true,message: "请输入交易码",trigger: "change"},
            {max:50, message: "交易码长度不能超过50个字符", trigger: "change"},
            {validator: checkFlowID, trigger: "change"}
          ],
          FLOWNAME: [
            {required: true,message: "请输入交易名称",trigger: "change"},
            {max:100, message: "交易名称长度不能超过100个字符", trigger: "change"},
            {validator: checkFlowName, trigger: "change"}
          ],
          FLOWSTATUS: [{required: true,message: "请选择交易状态",trigger: "blur"}],
          FLOWTYPE: [{required: true,message: "请选择交易类型",trigger: "blur"}],
          FLOWSUBTYPE: [{required: true,message: "请选择交易业务类型",trigger: "blur"}],
        },
        ST: { // 字段字典
            FLOWSTATUS:[
                {label: '启用',value: '0'},
                {label: '停用',value: '1'},
            ],
            FLOWTYPE:[
                {label: '公共类',value: '0'},
                {label: '对私类',value: '1'},
                {label: '对公类',value: '2'},
            ],
            FLOWSUBTYPE:[
                {label: '账务类',value: '0'},
                {label: '非账务类',value: '1'},
                {label: '信息维护类',value: '2'},
                {label: '信息查询类',value: '3'},
            ]
        }
      };
    },
    computed: {
      isShow: {
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      },
    },
    methods: {
        init() {
            if (this.$refs["queryForm"]) {
                this.$refs["queryForm"].resetFields();
            }
        },
        reset() {
            if (this.$refs["queryForm"]) {
                this.$refs["queryForm"].resetFields();
            }
        },
        submit() {
          
            this.$refs["queryForm"].validate(valid => {
              if (valid) {
                this.loading = true;
                let resBody = new addInfo();
                resBody.data.FLOWID = this.queryForm.FLOWID;
                resBody.data.FLOWNAME = this.queryForm.FLOWNAME;
                resBody.data.FLOWSTATUS = this.queryForm.FLOWSTATUS;
                resBody.data.FLOWTYPE = this.queryForm.FLOWTYPE;
                resBody.data.FLOWSUBTYPE = this.queryForm.FLOWSUBTYPE;
                request(resBody)
                    .then(response=>{
                        this.loading = false;
                        if (response.SYS_HEAD.ReturnCode == "000000") {
                            this.$message({
                                type: "success",
                                message: "操作成功！"
                            });
                            this.isShow = false;
                            this.$emit("refreshTable");
                        } else {
                            this.$message({
                                type: "error",
                                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                            });
                        }
                    })
                    .catch(error=>{
                        console.log(error);
                        this.$message({
                            type: "warning",
                            message: "页面出错！"
                        });
                        this.loading = false;
                    })
                
              }
            })
        }

    },
  };

</script>

<style lang="scss" scope>


</style>
